<template>
<!--      :expand-row-keys="expandKeys"  需要自动展开项 -->
<!--   default-expand-all  全部展开 -->
    <div>
 <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    border
     :expand-row-keys="expandKeys"  
  
   >
    <el-table-column
      prop="name"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="code"
      label="权限值"
      width="180">
    </el-table-column>
    <el-table-column
      prop="toCode"
      label="跳转权限值">
    </el-table-column>

      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="{row}">
          <el-button @click="handleClick(row)"  
          title="分配角色" type="primary" 
          size="small" icon="el-icon-user-solid"    
          :disabled="row.level > 3"
          ></el-button>
          <el-button type="primary" size="small" 
           title="修改用户" icon="el-icon-edit"
           @click="toAddPermission(row)"
           ></el-button>
          <el-button type="danger" size="small"  icon="el-icon-delete" @click="removePermission(row)"></el-button>
        </template>
      </el-table-column>

  </el-table>


      <el-dialog :title="dialogTitle" :visible.sync="dialogUserVisible">
      <el-form ref="ruleForm" :model="userForm" :rules="rules" label-width="120px">
        <el-form-item label="父级名称" v-if="userForm.level>2 && !userForm.id">
          <el-input :value="userForm.pname"  disabled/>
        </el-form-item>
        
        <el-form-item label="名称" prop="name">
          <el-input v-model="userForm.name"/>
        </el-form-item>
        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="userForm.code"/>
        </el-form-item>
        <el-form-item label="跳转路由权限值" prop="toCode" v-if="inputShow">
          <el-input v-model="userForm.toCode"  size="small" autocomplete="off"/>
        </el-form-item>
      
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addOrUpdate('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>


    </div>
</template>

<script>
import permissionApi from '@/api/acl/permission'  //api
import {cloneDeep} from 'lodash'
import { Message } from 'element-ui'

//菜单权限校验规则
const menuRules={
  name:[{require:true,message:'名称必须输入'}],
  code:[{require:true,message:'权限值必须输入'}]
}
//按钮功能权限
const btnRules={
  name:[{require:true,message:'名称必须输入'}],
  code:[{require:true,trigger:'blur',message:'功能权限必须输入'}]
}


export default {
    name: "Permission",
    data(){
        return{
  expandKeys: [], // 需要自动展开的项
  tableData: [], //菜单列表
    inputShow : false, //输入框的显示
  dialogUserVisible:false, //添加
  


        rules: {
          name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
    
        },

        //搜集数据
        //要操作的菜单权限对象
        userForm:{
          type: 1,
          level:0,
          name:'',
          code:'',
          toCode:''
        }
        }
    },

  computed:{

    //动态计算得到Dialog的标题
    dialogTitle(){
      const {id,level}=this.userForm
      if(id){
        return level===4?'修改功能':'修改菜单'
      }else{
        return level===4? '添加功能' : `添加${level===2?'一级':'二级'}菜单`
      }
    },



    //计算权限等级来确定检验规则
permissionRules(){
  return this.userForm.level===4 ?btnRules : menuRules
}
  },


    methods:{
      

      
      //====删除====//
removePermission(row){
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const result = await permissionApi.removePermission(row.id)
        this.$message.success(result.message || '删除成功!')
        this.permissionlist()
      }).catch((error) => {
        if (error==='cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }
      })
},




//点击取消
cancel(){
  this.userForm={}  //清空数据
this.dialogUserVisible=false //关闭弹窗

},

//重置数据
resetData(){
  this.dialogUserVisible=false
  this.userForm={}
},

//点击确认保存
addOrUpdate(ruleForm){
  this.$refs[ruleForm].validate(async valid=>{
    if (valid) {
    const {id} =this.userForm
    if(id){
      let result=await permissionApi.updatePermission(this.userForm)
      console.log(result)
      Message.success('修改成功')
      this.resetData() //清空数据
          this.permissionlist()//刷新
   }else{
    let result = await permissionApi.addPermission(this.userForm)
      this.resetData() //清空数据
      this.permissionlist()//刷新
       Message.success('添加成功')

        this.$refs[ruleForm].resetFields()  //清理代码验证飘红

 }
          
        }else{
          console.log('不能提交！')
          return false
        }
  })
},



//点击回显数据
toAddPermission(row){
  this.dialogUserVisible=true  //对话框的展示
    // 显示input框
      if (row.level === 3) {
        this.inputShow = true
      } else {
        this.inputShow = false
      }
    this.userForm=cloneDeep(row)  //深拷贝
},




  //======点击添加菜单========//
handleClick(row){
  if(row.level===3){
    this.inpinputShow=true
  }else{
    this.inpinputShow=false
  }
this.dialogUserVisible=true  //对话框的显示
    this.userForm.pid=row.id  //将获取到的对象赋值给新的对象
    this.userForm.type=row.level===4?2:1  //将获取到的对象赋值给新的对象
    this.userForm.level=row.level+1  //将获取到的对象赋值给新的对象

},


  //====获取数据====//
  async permissionlist(){
    const result =await permissionApi.getPermissionList()
    console.log(result.data)
      if(result.code===20000){
          this.tableData=result.data.children
          this.expandKeys=[this.tableData[0].id]  //实现点击显示第二阶梯
  
      }
  },


    },
mounted(){
  this.permissionlist()
}

    }
    

</script>

<style scoped>

</style>